<template>
    <div>
        <!-- 布局：分成二个栅格（https://v15.vuetifyjs.com/zh-Hans/framework/grid）-->
        <v-layout row wrap>
            <v-flex xs6>
                <!-- 按钮 (https://v15.vuetifyjs.com/zh-Hans/components/buttons)-->
                <v-btn  color="success" >新增品牌</v-btn>
            </v-flex>

            <v-flex xs6>
                <!--新增和搜索框 (https://v15.vuetifyjs.com/zh-Hans/components/text-fields)-->
                <v-text-field
                        label="品牌搜索"
                        prepend-icon="search"
                        v-model="searchKey"
                        @keydown.enter="getBrands()"
                ></v-text-field>
            </v-flex>
        </v-layout>


        <!--列表
         :headers="headers"             表头: 加载data中的headers
         :items="brands"                列表品牌名
         :pagination.sync="pagination"  分页对象
         :total-items="totalBrand"      总记录数
         :loading="loading"             加载的动画
         class="elevation-1"            样式
        -->
        <!--列表-->
        <v-data-table
                :headers="headers"
                :items="brands"
                :pagination.sync="pagination"
                :total-items="totalBrand"
                :loading="loading"
                class="elevation-1"
        >
            <!-- 迭代
            slot="items" 指定要遍历的数据
            slot-scope="props" 把当前遍历的数据起个别名
            -->
            <template v-slot:items="props">
                <td>{{ props.item.id }}</td>
                <td class="text-xs-right">{{ props.item.name }}</td>
                <td class="text-xs-right"><img v-bind:src="props.item.image" /></td>
                <td class="text-xs-right">{{ props.item.letter }}</td>
                <td class="text-xs-center">
                    <v-btn color="error">删除</v-btn>
                    <v-btn color="warning">修改</v-btn>
                </td>
            </template>
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "MyBrand",
        data() {
            return {
                searchKey: "",     // 搜索关键字
                totalBrand: 0,     // 总品牌
                brands: [],        // 列表品牌名（:items="brands"）
                loading: true,     // 加载进度条的特效
                pagination: {},    // 分页插件
                headers: [         // 表头信息
                    {text: 'id', align: 'left', value: 'id'},
                    {text: '名称', align: 'right', sortable: false, value: 'name'},
                    {text: 'Logo', align: 'right', sortable: false, value: 'logo'},
                    {text: '首字母', align: 'right', value: 'letter'},
                    {text: '操作', align: 'center', sortable: false, value: 'none'},
                ]
            }
        },
        mounted() {
            // 钩子函数会自动触发
            this.getBrands()   // 调用getBrands()方法
        },
        watch: {
            pagination: {
                deep: true,
                handler() {
                    this.getBrands();
                }
            }
        },
        methods: {
            getBrands() {    // getBrands方法
                // 效果
                this.loading = true;
                setTimeout(() => {
                    // 调用后台的接口
                    this.$http.get("/item/brand/page", {
                        params: {
                            key: this.searchKey,
                            page: this.pagination.page,
                            rows: this.pagination.rowsPerPage,
                            sortBy: this.pagination.sortBy,
                            desc: this.pagination.descending
                        }
                    }).then(res => {
                        // 结束特效
                        this.loading = false;
                        // 成功的回调
                        console.log(res)
                        // 跟数据赋值
                        this.brands = res.data.items;
                        this.totalBrand = res.data.total;
                    }).catch(err => {
                        // 异常回调
                        console.log(err)
                        // 结束特效
                        this.loading = false;
                    })
                    // 结束特效
                    //     this.loading = false;
                    //     // 给列表赋值(假数据)
                    //     this.brands = [  // 赋值 brands = [数据]
                    //         {id: 2031, name: "OPPO", image: "1.jpg", letter: "O"},
                    //         {id: 2032, name: "飞利浦", image: "2.jpg", letter: "F"},
                    //         {id: 2033, name: "华为", image: "3.jpg", letter: "H"},
                    //         {id: 2034, name: "酷派", image: "4.jpg", letter: "K"},
                    //         {id: 2035, name: "OPPO", image: "1.jpg", letter: "O"},
                    //         {id: 2036, name: "飞利浦", image: "2.jpg", letter: "F"},
                    //         {id: 2037, name: "华为", image: "3.jpg", letter: "H"},
                    //         {id: 2038, name: "酷派", image: "4.jpg", letter: "K"},
                    //         {id: 2039, name: "酷派", image: "4.jpg", letter: "K"},
                    //         {id: 2040, name: "酷派", image: "4.jpg", letter: "K"},
                    //         {id: 2041, name: "酷派", image: "4.jpg", letter: "K"},
                    //         {id: 2042, name: "魅族", image: "5.jpg", letter: "M"}
                    //     ];
                    //     // 给总记录数赋值
                    //     this.totalBrand = 20
                    // }, 1000) // 一秒钟关闭特效
                }, 500) // 一秒钟关闭特效
            }
        }
    }
</script>
